<template>
  <div>
    <!-- 弹窗 -->

    <el-dialog
      :title="pagesdata.id?'编辑页面':'添加页面'"
      :visible="visaddpages"
      width="50%"
      @close="cancelBtn"
    >
      <div class="content">
        <el-form ref="ruleForm" :model="pagesdata" label-width="50px" :rules="rules" class="demo-ruleForm">
          <el-form-item label="标题" prop="title">
            <el-input v-model="pagesdata.title" />
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <!-- 富文本编辑器的高度已调整 -->
            <quill-editor v-model="pagesdata.content" @blur="$refs.ruleForm.validateField('content')" />
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmBtn()">确 定</el-button>
        <el-button @click="cancelBtn()">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
// 接口putPages
import { getdetails, postPages, putPages } from '@/api/pages'
export default {
  props: {
    visaddpages: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 表单数据
      pagesdata: {
        title: '',
        content: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入页面名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入页面内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 确定添加确定编辑
    confirmBtn() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          if (this.pagesdata.id) {
            await putPages(this.pagesdata)
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
          } else {
            await postPages(this.pagesdata)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          }
          this.cancelBtn()
          this.$emit('gettablelist')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取当前表格数据
    async  getpagedetails(id) {
      const res = await getdetails(id)

      this.pagesdata = res.data
    },

    // 取消
    cancelBtn() {
      this.pagesdata = {
        title: '',
        content: ''
      }
      this.$refs.ruleForm.resetFields()
      this.$emit('update:visaddpages', false)
    }

  }
}
</script>
<style lang="scss" scoped>
  .content{
      height: 400px;
      overflow: auto;
    }
    ::v-deep .ql-editor {
      height: 176px;
    }
</style>
